<template>
  <div class="main-content">
    <!-- 列表页 -->
    <template v-if="showFlag">
      <el-form class="search-form" :inline="true" :model="searchForm">
        <el-row class="search-row">
          <div class="search-item">
            <label class="search-label">账号</label>
            <el-input v-model="searchForm.zhanghao" placeholder="账号" clearable></el-input>
          </div>
          <div class="search-item">
            <label class="search-label">姓名</label>
            <el-input v-model="searchForm.xingming" placeholder="姓名" clearable></el-input>
          </div>
          <el-button class="search-btn" type="primary" @click="search()">查询</el-button>
        </el-row>

        <el-row class="action-row">
          <el-button class="action-btn" v-if="isAuth('yonghu','新增')" type="success" @click="addOrUpdateHandler()">新增</el-button>
          <el-button class="action-btn" v-if="isAuth('yonghu','删除')" :disabled="dataListSelections.length <= 0" type="danger" @click="deleteHandler()">删除</el-button>
          <el-button class="action-btn" v-if="isAuth('yonghu','报表')" type="warning" @click="chartDialog()">统计报表</el-button>
        </el-row>
      </el-form>
      
      <el-table 
        class="data-table"
        :stripe='true'
        v-if="isAuth('yonghu','查看')"
        :data="dataList"
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandler">
        <el-table-column type="selection" align="center" width="50"></el-table-column>
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column prop="zhanghao" label="账号">
          <template slot-scope="scope">
            {{scope.row.zhanghao}}
          </template>
        </el-table-column>
        <el-table-column prop="xingming" label="姓名">
          <template slot-scope="scope">
            {{scope.row.xingming}}
          </template>
        </el-table-column>
        <el-table-column prop="xingbie" label="性别">
          <template slot-scope="scope">
            {{scope.row.xingbie}}
          </template>
        </el-table-column>
        <el-table-column prop="shouji" label="手机">
          <template slot-scope="scope">
            {{scope.row.shouji}}
          </template>
        </el-table-column>
        <el-table-column prop="youxiang" label="邮箱">
          <template slot-scope="scope">
            {{scope.row.youxiang}}
          </template>
        </el-table-column>
        <el-table-column prop="touxiang" width="200" label="头像">
          <template slot-scope="scope">
            <div v-if="scope.row.touxiang">
              <img v-if="scope.row.touxiang.substring(0,4)=='http'" :src="scope.row.touxiang.split(',')[0]" class="avatar">
              <img v-else :src="$base.url+scope.row.touxiang.split(',')[0]" class="avatar">
            </div>
            <div v-else>无图片</div>
          </template>
        </el-table-column>
        <el-table-column width="300" label="操作">
          <template slot-scope="scope">
            <el-button class="table-btn info-btn" v-if="isAuth('yonghu','查看')" type="text" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
            <el-button class="table-btn edit-btn" v-if="isAuth('yonghu','修改')" type="text" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
            <el-button class="table-btn delete-btn" v-if="isAuth('yonghu','删除')" type="text" @click="deleteHandler(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        background
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :layout="layouts.join()"
        :total="totalPage"
        prev-text="<"
        next-text=">"
        :hide-on-single-page="true">
      </el-pagination>
    </template>
    
    <!-- 添加/修改页面 -->
    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>

    <!-- 统计报表弹窗 -->
    <el-dialog
      title="统计报表"
      :visible.sync="chartVisiable"
      class="chart-dialog"
      width="800">
      <div id="xingbieChart" class="chart"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chartDialog">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//$graphType1
//$buttonName1
//$subNameList1
import * as echarts from 'echarts'
import axios from 'axios'
import AddOrUpdate from "./add-or-update";
export default {
  data() {
    return {
      searchForm: {
        key: ""
      },
      form:{},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      showFlag: true,
      sfshVisiable: false,
      shForm: {},
      chartVisiable: false,
      chartVisiable1: false,
      chartVisiable2: false,
      chartVisiable3: false,
      chartVisiable4: false,
      chartVisiable5: false,
      addOrUpdateFlag:false,
      layouts: ["total","prev","pager","next","sizes","jumper"],

    };
  },
  created() {
    this.init();
    this.getDataList();
    this.contentStyleChange()
  },
  mounted() {
  },
  filters: {
    htmlfilter: function (val) {
      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
    }
  },
  components: {
    AddOrUpdate,
  },
  methods: {

    contentStyleChange() {
      this.contentPageStyleChange()
    },
    // 分页
    contentPageStyleChange(){
      let arr = []

      // if(this.contents.pageTotal) arr.push('total')
      // if(this.contents.pageSizes) arr.push('sizes')
      // if(this.contents.pagePrevNext){
      //   arr.push('prev')
      //   if(this.contents.pagePager) arr.push('pager')
      //   arr.push('next')
      // }
      // if(this.contents.pageJumper) arr.push('jumper')
      // this.layouts = arr.join()
      // this.contents.pageEachNum = 10
    },

    chartDialog() {
      this.chartVisiable = !this.chartVisiable;
      this.$nextTick(()=>{
        var xingbieChart = echarts.init(document.getElementById("xingbieChart"),'macarons');
        this.$http({
            url: "yonghu/group/xingbie",
            method: "get",
        }).then(({ data }) => {
            if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for(let i=0;i<res.length;i++){
                xAxis.push(res[i].xingbie);
                yAxis.push(parseFloat((res[i].total)));
                pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].xingbie
                })
                var option = {};
                option = {
                        title: {
                            text: '用户',
                            left: 'center'
                        },
                        legend: {
                          top: '5%',
                          left: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: '{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['25%', '55%'],
                                center: ['50%', '60%'],
                                data: pArray,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                };
                // 使用刚指定的配置项和数据显示图表。
                xingbieChart.setOption(option);
                  //根据窗口的大小变动图表
                window.onresize = function() {
                    xingbieChart.resize();
                };
            }
            }
        });
        // xcolumn ycolumn  
      })
    },

    init () {
    },
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      }
           if(this.searchForm.zhanghao!='' && this.searchForm.zhanghao!=undefined){
            params['zhanghao'] = '%' + this.searchForm.zhanghao + '%'
          }
           if(this.searchForm.xingming!='' && this.searchForm.xingming!=undefined){
            params['xingming'] = '%' + this.searchForm.xingming + '%'
          }
      this.$http({
        url: "yonghu/page",
        method: "get",
        params: params
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandler(val) {
      this.dataListSelections = val;
    },
    // 添加/修改
    addOrUpdateHandler(id,type) {
      this.showFlag = false;
      this.addOrUpdateFlag = true;
      this.crossAddOrUpdateFlag = false;
      if(type!='info'){
        type = 'else';
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id,type);
      });
    },
    // 下载
    download(file){
      window.open(`${file}`)
    },
    // 删除
    deleteHandler(id) {
      var ids = id
        ? [Number(id)]
        : this.dataListSelections.map(item => {
            return Number(item.id);
          });
      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: "yonghu/delete",
          method: "post",
          data: ids
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.search();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.main-content {
  min-height: 100vh;
  padding: 30px;
  background: #f6f6f6;

  .search-form {
    margin-bottom: 20px;

    .search-row {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }

    .search-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }

    .search-label {
      margin-right: 10px;
      font-size: 14px;
      color: #606266;
    }

    .search-btn {
      background: #409EFF;
      color: #fff;
      border: none;
      padding: 12px 20px;
      border-radius: 4px;
    }
  }

  .action-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

    .action-btn {
      margin-right: 15px;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  .data-table {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin-bottom: 20px;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }

    .table-btn {
      padding: 5px 0;
      margin: 0 10px;
      font-size: 14px;
    }

    .info-btn {
      color: #409EFF;
    }

    .edit-btn {
      color: #67C23A;
    }

    .delete-btn {
      color: #F56C6C;
    }
  }

  .pagination {
    text-align: center;
    margin-top: 20px;
  }

  .chart-dialog {
    .chart {
      width: 100%;
      height: 600px;
    }
  }
}
</style>
